<template>
    <div class="train-left">
        <el-card class="left-top" :class="par ? 'active' : ''">
            <div class="train-text">
                练习室
                <div class="solid" v-if="!par"></div>
                <el-icon v-if="par" class="inherit" @click="myPractice(1)"><ArrowDown /></el-icon>
                <el-icon v-else class="inherit" @click="myPractice(2)"><ArrowRight /></el-icon>
            </div>
            <div v-if="!par">
                <router-link class="mytext" :to="`/trainroom/mytrainroom?content=${istrain}`">
                    我的练习室
                </router-link>
            </div>
        </el-card>
        <div class="left-bottom">
            <div class="left-item" :class="{ active: title == 'cache' }" @click="par = true">
                <router-link to="/trainroom/cache" @click="defaultcache">缓存</router-link>
                <div class="soildleft"></div>
            </div>
            <div class="left-item" @click="open" :class="{ active: title == 'audio' }">
                <router-link to="/trainroom/audio">音频库</router-link>
                <div class="soildleft"></div>
            </div>
            <div class="left-item" @click="par = true" :class="{ active: title == 'collect' }">
                <router-link to="/trainroom/collect" @click="defaultcollect">收藏</router-link>
                <div class="soildleft"></div>
            </div>
            <div class="left-item" @click="par = true" :class="{ active: title == 'history' }">
                <router-link to="/trainroom/history" @click="defaulthistory">历史</router-link>
                <div class="soildleft"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { ref, watch } from 'vue';
import useTrainroomStore from '@/store/modules/trainroom';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
const TrainroomStore = useTrainroomStore();
const par = ref(false);
const istrain = ref(true);
const route = useRoute();

const myPractice = (num: number) => {
    if (num == 2) {
        par.value = true;
    } else if (num == 1) {
        par.value = false;
    }
};
//点击缓存
const defaultcache = async () => {
    await TrainroomStore.getshowpage();
};
//点击收藏
const defaultcollect = async () => {
    await TrainroomStore.getshowcollect();
};
//点击 历史浏览
const defaulthistory = async () => {
    await TrainroomStore.gethistorydata();
};
//点击音频
const open = () => {
    par.value = true;
    ElMessageBox.alert('请打开中舞网APP,点击"练习室"-"音频库"中查看。', '提示', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: (action: Action) => {
            ElMessage({
                type: 'info',
                message: `action: ${action}`,
            });
        },
    });
};

const title = ref('');

//监听路由
watch(route, (nval, oval) => {
    title.value = nval.meta.title as string;
});
</script>

<style scoped lang="less">
* {
    list-style: none;
    .train-left {
        width: 170px;
        height: 300px;
        // background-color: aquamarine;
        margin-right: 10px;
        .left-top {
            width: 100%;
            height: 100px;
            // background-color: blueviolet;
            margin-bottom: 10px;
            &.active {
                height: 50px;
                transition: height 0.2s;
            }

            .train-text {
                width: 100%;
                // height: 60px;
                // background-color: red;
                font-size: 16px;
                color: #111;
                // padding: 10px;
                cursor: pointer;
                display: block;
                // line-height: 50px;
                position: relative;
                margin-bottom: 10px;

                .solid {
                    position: absolute;
                    width: 4px;
                    height: 34px;
                    left: -20px;
                    top: -46%;
                    background-color: #f93684;
                }
                .inherit {
                    position: absolute;
                    right: 0px;
                    top: 3px;
                }
            }
            .mytext {
                width: 100%;
                font-size: 16px;
                padding: 12px 0 8px 10px;
                cursor: pointer;
                display: block;
                text-decoration: none;
                color: #f93684;
                // position: fixed;
                text-align: center;
                box-sizing: border-box;
            }
        }
        .left-bottom {
            padding: 5px 0;
            width: 100%;
            background-color: #fff;
            margin-bottom: 10px;
            box-shadow: 1px 4px 6px #e2e1e1;
            .left-item {
                width: 100%;
                height: 50px;
                position: relative;
                padding: 0;
                a {
                    font-size: 16px;
                    color: #111;
                    padding: 17px 21px;
                    cursor: pointer;
                    position: relative;
                    display: block;
                    text-decoration: none;
                }
                .soildleft {
                    height: 37px;
                    width: 4px;
                    // background-color: rgb(34, 26, 26);
                    position: absolute;
                    top: 10px;
                    left: 0px;
                }
                &:hover .soildleft {
                    background-color: #f93684;
                }
                &.active .soildleft {
                    background-color: #f93684;
                }
            }
        }
    }
}
</style>
